<!-- 首页 -->
<template>
	<view class="index">
		<view class="topBox">
			<h1 class="index_title">宏烨找房</h1>
		</view>
		<view class="main">
			<view class="cate">
				<view @click="btn()">
					<image src="../../static/download.png" mode=""></image>
					<span>新房</span>
				</view>
				<view @click="btn2()">
					<image src="../../static/download2.png" mode=""></image>
					<span>二手房</span>
				</view>
				<view @click="btn3()">
					<image src="../../static/download3.png" mode=""></image>
					<span>出租房</span>
				</view>
				<view @click="btn4()">
					<image src="../../static/download4.png" mode=""></image>
					<span>房贷计算器</span>
				</view>
			</view>
			<view class="homeList">

				<view class="xinfnag">
					新房
					<view class="card" v-for="(item,index) in list" :key="index" @click="todel(item)">
						<image style="width: 100px; height: 75px; background-color: #eeeeee;margin-right: 10px;"
							:src="item.img" mode="">
						</image>
						<view class="card_text">
							<p class="card_title">{{item.title}}</p>
							<p class='crad_price'>{{item.price}}</p>
							<p class="card_city" v-if="item.city">{{item.city}}</p>
							<!-- 		<p class="card_room">{{item.room}}室{{item.living_room}}厅{{item.acreage}}</p> -->
							<p class="card_address" v-if="item.tags.length">
									<span>{{item.tags[0]}}</span>
									<span>{{item.tags[1]}}</span>
									<span>{{item.tags[2]}}</span>
									<span>{{item.tags[3]}}</span>
								</p>
						</view>
					</view>
				</view>
				
				<view class="ershou">
					二手房
					<view class="card" v-for="(item,index) in secList" :key="index" @click="todel(item)">
						<image style="width: 100px; height: 75px; background-color: #eeeeee;margin-right: 10px;"
							:src="item.img" mode="">
						</image>
						<view class="card_text">
							<p class="card_title">{{item.title}}</p>
							<p class='crad_price'>{{item.price}}</p>
							<p class="card_city" v-if="item.city">{{item.city}}</p>
									<p class="card_room">{{item.room}}室{{item.living_room}}厅{{item.acreage}}</p>
							<p class="card_address"  v-if="item.tags.length">
									<span>{{item.tags[0]}}</span>
									<span>{{item.tags[1]}}</span>
									<span>{{item.tags[2]}}</span>
									<span>{{item.tags[3]}}</span>
								</p>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

	</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [],
				secList:[],
			}
		},
		onLoad() {

		},
		created() {
			this.getList()
		},
		methods: {
			// 新房
			btn() {
				uni.switchTab({
					url: "/pages/Bridalchamber/Bridalchamber"
				})
			},
			//二手房
			btn2() {
				uni.switchTab({
					url: "/pages/Secondhand/Secondhand"
				})
			},
			// 出租房
			btn3() {
				uni.switchTab({
					url: "/pages/Hire/Hire"
				})
			},
			// 房贷计算器
			btn4() {
				uni.navigateTo({
					url: "/pages/Compute/Compute"
				})
			},
			// 渲染
			async getList() {
				const result = await uni.request({
					url: "http://api.shbwyz.com/api/house.html",
					method: 'GET'
				})
				console.log(result[1].data.data, '--------');
				if (result[1].data.code === 200) {
					this.list = result[1].data.data.slice(2,5)
				}
				const result1 = await uni.request({
					url: "http://api.shbwyz.com/api/second.html",
					method: 'GET'
				})
				console.log(result1[1].data.data, '--------');
				if (result1[1].data.code === 200) {
					this.secList = result1[1].data.data.slice(2,5)
				}
			},
			todel(item) {
				uni.navigateTo({
					url: `/pages/Detail/Detail?id=${item.id}`
				})
			},
		}
	}
</script>

<style>
/* 	.index_title{
		padding: 30px 0;
	} */
	.topBox {
		width: 100%;
		height: 100%;
		background: #1890ff;
		text-align: center;
		line-height: 50px;
		font-weight: 700;
		font-size: 25px;
		color: #fff;
	}

	.main {
		width: 100%;
		height: auto;
		background-color: #f1f1f1;
	}

	.homeList {
		width: 100%;
		height: auto;
		background-color: #fff;
		margin-top: 10px;
		margin: 0 auto;
		padding: 0 15px;
	}
	.homeList>view{
		padding-top: 10px;
		margin-top: 10px;
	}


	.cate {
		width: 100%;
		height: 100px;
		background: #fff;
		display: flex;
		justify-content: space-around;
		text-align: center;
		font-size: 14px;
	}

	.cate view {
		width: 22%;
		height: 100%;
	}

	.cate view image {
		width: 55%;
		height: 40px;
		padding-top: 20px;
	}

	.cate view span {
		display: block;
		padding-top: 10px;
	}

	.card {
		width: 90%;
		display: flex;
		/* height: 250px; */
		padding: 15px 0;
		margin: 0;
		justify-content: flex-start;
		border-bottom: 1px solid #f1f1f1;
	}

	.card_text {
		flex: 1;
		width: 100%;
		font-size: 12px;
	}

	.card_text p:not(.card_title) {
		color: #919191;
	}

	.card_text .crad_price {
		float: right;
		color: #00ac00 !important;
		font-weight: 700;
		position: absolute;
		right: 25px;
	}

	.screen {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 44px;
	}

	.screen_btn {
		flex: 1;
		text-align: center;
		color: #919191;
	}

	button {
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 0;
		outline: none,
	}

	.card_address {
		width: 100%;
		height: 20px;
	}

	.card_address span {
		display: inline-block;
		width: auto;
		height: 20px;
		line-height: 20px;
		margin-left: 2px;
		text-align: center;
		margin-top: 4px;
		padding: 0px 3px;
	}

	.card_address span:first-child {
		background: #ffebef;
		color: #e24546;
	}

	.card_address span:nth-child(2) {
		background: #e8eaf6;
		color: #6a79d5;
	}

	.card_address span:nth-child(3) {
		background: #e0f7fa;
		color: #4f9859;
	}

	.card_address span:nth-child(4) {
		background: #e0f8fa;
		color: #579ca5;
	}
	
	/* .xin_address span{
		width: auto;
	} */
</style>
